﻿@model TelerikedIn.WebApp.ViewModels.User.FullUserVM

@{
    ViewBag.Title = "User Details";
    var spanWidth = "span6";
    
    if (Model.Skills == null || Model.Skills.Count == 0)
    {
        spanWidth = "span6 offset3";   
    }
}

<h1>User Details</h1>
<div class="container-fluid">
    <div class="row-fluid">
        <div class="@spanWidth well hero-unit">
            <div class="image-container thumbnail"> @Helpers.GetImage(Model.Image)</div>
            <div class="fullname">
                @Html.DisplayFor(model => model.FullName)
            </div><br><br>
            <div class="city">
                @Html.DisplayFor(model => model.Country),  @Html.DisplayFor(model => model.City)
            </div><br>
            <div class="edu">
                @Html.DisplayFor(model => model.Education)
            </div><br><br>
        </div>
        @if (Model.Skills != null && Model.Skills.Count > 0)
        { 
            <div class="span6 well hero-unit">
            <p class="lead">Skills and Endorsments:</p>
            <ul class="unstyled inline endorse-user-ul">
                @foreach (var skill in Model.Skills)
                {
                    <li class="k-block">
                        <span class="k-blockendorsments-count" id="endorsments-count-@skill.Id" title="Endorsments for this skill">
                            @skill.EndorsmentsCount
                        </span>

                        @skill.Name

                        @if (Model.UsersAreConnected)
                        {
                            <span style="position:absolute;" id="endorsment-loading-element-@skill.Id" class="hide" >
                                <img src="~/Content/Metro/loading-image.gif" width="15" height="25" style="position:relative;z-index:100;background-color:white;"  />
                            </span>
                            <span title="@(skill.IsEndorsed? "Remove ednorsment" : "Endorse user")" class="plus-minus">
                                @(Ajax.ActionLink(skill.IsEndorsed? "-" : "+", "Endorse", new { skillId = skill.Id, userId = Model.Id },
                                    new AjaxOptions
                                    {
                                        UpdateTargetId = "endorse-link-" + skill.Id,
                                        InsertionMode = System.Web.Mvc.Ajax.InsertionMode.Replace,
                                        HttpMethod = "PUT",
                                        OnFailure = "failEndorse",
                                        OnSuccess = "successEndorse",
                                        LoadingElementId = "endorsment-loading-element-" + skill.Id
                                    },
                                    new { id = "endorse-link-" + skill.Id })
                                )
                            </span>
                        }
                    </li>
                }
            </ul>
        </div>
        }
    </div>
</div>


<script>
    function failEndorse(response, error, context, fourth) {
        var link = this;
        link.url = "#";
        var title = response.status = "400" ? "Your mistake: " : "Our mistake: ";
        link.innerHTML("<span class='text-error' title='" + title + response.statusText + "'>X</span>");
    }

    function successEndorse(response) {
        var responseElement = $(response);
        var sign = responseElement.data("sign");
        var skillId = responseElement.data("skill-id");

        toggleEndorsmentCount($("#endorsments-count-" + skillId), sign);
    }
    function toggleEndorsmentCount(countElement, sign) {
        var endosmentsCount = parseInt(countElement.text());
        
        if (sign == '+') {
            countElement.text(endosmentsCount ? endosmentsCount += 1 : 1)
        }
        else {
            countElement.text(endosmentsCount && endosmentsCount > 0 ? endosmentsCount -= 1 : 0)
        }
    }
</script>
